<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport"/>
  <script type="text/javascript" src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script type="text/javascript" src="js/qrcode.js"></script>
  <script type="text/javascript" src="js/save-svg.js"></script>
</head>
<style>
  body {
    margin: 0;
    padding: 0;
    background: #eff1f3;
  }

  .svg {
    max-width: 100%;
    max-height: 100%;
  }

  .container {
    position: absolute;
    top: 10px;
    right: 0;
    left: 0;
    bottom: 10px;
  }
</style>
<body>
<div class="container">
  <svg viewBox="0 0 750 1122" id="svg" class="svg" xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ -->
    <style>

    </style>

    <image
        xlink:href=""
        id="mainImg" x="0"
        y="0" class="main-pic" width="750" height="1122"/>
    <image x="225" y="560"
           width="300"
           height="300"
           id="qrcodeImg"
           xlink:href=""></image>

  </svg>
  <div>
    <div id="qrcode" class="qrcode-hide"></div>
  </div>
</div>
<script>
  var qrcode = new QRCode(document.getElementById("qrcode"), {
    width: 100,
    height: 100,
    correctLevel: QRCode.CorrectLevel.M
  });
  $(document).on('notify', function (e) {
    var action = e.detail.action;
    switch (action) {
      case 'getImageData':
        // alert(JSON.stringify(e.detail));
        setQrCodeUrl(e.detail.url, e.detail.state)
        break;
    }
  })

  function setQrCodeUrl(url, state) {
    qrcode.makeCode(url, function () {
      $("#qrcodeImg").attr('xlink:href', $('#qrcode img').attr('src'))
      notifyImageData(state)
    });
  }

  function notifyImageData(state) {
    dataImage(function (data) {
      $notifyWeex({
        action: 'imageData',
        dataUrl: data,
        state: state || ''
      })
    })

  }

  function dataImage(callback) {
    var svgXml = $('#svg')[0].outerHTML;

    var image = new Image();
    image.src = 'data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent(svgXml))); //给图片对象写入base64编码的svg流
    image.onload = function () {
      var canvas = document.createElement('canvas');  //准备空画布
      canvas.width = 750;
      canvas.height = 1122;
      var context = canvas.getContext('2d');  //取得画布的2d绘图上下文
      context.drawImage(image, 0, 0);
      callback && callback(canvas.toDataURL('image/jpg'))
    }
  }
</script>
</body>
</html>